// import React from "react";
// import { ImageBackground, StyleSheet, Text, View } from "react-native";
//
// const image = { uri: "https://zh-hans.reactjs.org/logo-og.png" };
//
// const App = () => (
//   <View style={styles.container}>
//     <ImageBackground source={image} style={styles.image}>
//       <Text style={styles.text}>Inside</Text>
//     </ImageBackground>
//   </View>
// );
//
// const styles = StyleSheet.create({
//   container: {
//     flex: 1,
//     flexDirection: "column"
//   },
//   image: {
//     flex: 1,
//     resizeMode: "cover",
//     justifyContent: "center"
//   },
//   text: {
//     color: "white",
//     fontSize: 42,
//     fontWeight: "bold",
//     textAlign: "center",
//     background: "#000000a0"
//   }
// });
//
// export default App;

import React from 'react';
import {StyleSheet, Button, View, SafeAreaView, Text, Alert} from 'react-native';

const Separator = () => {
    return <View style={styles.separator}/>;
}

const App = ({route, navigation}) => {
    const {name = '李四', job = '干饭饭'} = route.params||{}
    return (
        <SafeAreaView style={styles.container}>
            <View>
                <Text style={styles.title}>
                    {name}-{job}
                </Text>
                {/*<Button*/}
                {/*    title="点击跳转User again"*/}
                {/*    onPress={() => {*/}
                {/*        navigation.push('User')*/}
                {/*    }}*/}
                {/*/>*/}
            </View>
            <Separator/>
            <View>
                <Text style={styles.title}>
                    Adjust the color in a way that looks standard on each platform. On
                    iOS, the color prop controls the color of the text. On Android, the
                    color adjusts the background color of the button.
                </Text>
                <Button
                    color="#f194ff"
                    title="返回"
                    disabled={true}
                    onPress={() => {
                        navigation.goBack()
                    }}
                />
            </View>
            <Separator/>
            <View>
                <Text style={styles.title}>
                    All interaction for the component are disabled.
                </Text>
                {/*<Button*/}
                {/*    title="返回到第一屏"*/}
                {/*    onPress={() => {*/}
                {/*        navigation.popToTop()*/}
                {/*    }}*/}
                {/*/>*/}
            </View>
            <Separator/>
            <View>
                <Text style={styles.title}>
                    This layout strategy lets the title define the width of the button.
                </Text>
                <View style={styles.fixToText}>
                    <Button
                        title="change Param"
                        onPress={() => {navigation.setParams({name:'傻子'})}}
                    />
                    <Button
                        title="返回Home"
                        onPress={() => {navigation.navigate({name:'Home',params:{post:'橘子'},merge:true})}}
                    />
                </View>
                {/*<Button*/}
                {/*    title="跳转NestingNavigator"*/}
                {/*    onPress={() => {navigation.navigate({name:'Home',params:{post:'橘子'},merge:true})}}*/}
                {/*/>*/}
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 10,
        marginHorizontal: 16,
    },
    title: {
        textAlign: 'center',
        marginVertical: 8,
    },
    fixToText: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    separator: {
        marginVertical: 8,
        borderBottomColor: '#737373',
        borderBottomWidth: StyleSheet.hairlineWidth,
    },
});

export default App;